<template>
    <div class="player" v-show="playList.length > 0">
        <transition
            name="normal"
            @enter="enter"
            @after-enter="afterEnter"
            @leave="leave"
            @after-leave="afterLeave"
        >
            <div class="normal-player" v-show="fullScreen">
                <div class="background">
                    <img width="100%" height="100%" :src="currentSong.image">
                </div>
                <div class="top">
                    <div class="back" @click="back">
                        <i class="back-icon iconfont icon-down"></i>
                    </div>
                    <div class="title" ref="titleTop">
                        <h2 class="scroll-text text" v-html="currentSong.name"></h2>
                    </div>
                    <div class="subtitle">
                        <span class="text" v-html="currentSong.singer"></span>
                    </div>
                </div>
                <div class="middle"
                     @touchstart.prevent="middleTouchStart"
                     @touchmove.prevent="middleTouchMove"
                     @touchend="middleTouchEnd"
                >
                    <div class="middle-l" ref="middleL">
                        <div class="cd-wrapper" ref="cdWrapper">
                            <div class="cd" :class="cdCls">
                                <img class="image" :src="currentSong.image">
                            </div>
                        </div>
                        <div class="playing-lyric-wrapper" :class="{'high-light': isProgressBtnTouch}">
                            <p class="playing-lyric" v-html="playingLyric"></p>
                        </div>
                    </div>
                    <Scroll class="middle-r"
                            ref="lyricList"
                            :data="currentLyric && currentLyric.lines"
                    >
                        <div class="lyric-wrapper" ref="lyricWrapper">
                            <div v-if="currentLyric">
                                <p ref="lyricLine"
                                   class="text"
                                   v-for="(line, index) in currentLyric.lines"
                                   :class="{'current': currentLineNum === index}"
                                   :key="index"
                                   v-html="line.txt"
                                ></p>
                                <p class="text current"
                                    v-if="!currentLyric.lines.length"
                                >此歌曲为没有填词的纯音乐，请您欣赏</p>
                            </div>
                        </div>
                    </Scroll>
                </div>
                <div class="bottom">
                    <div class="dot-wrapper">
                        <span class="dot" :class="{'active': currentShow==='cd'}"></span>
                        <span class="dot" :class="{'active': currentShow==='lyric'}"></span>
                    </div>
                    <div class="progress-wrapper">
                        <span class="time time-l"
                              :class="{'big-font': isProgressBtnTouch}"
                        >{{format(currentTime)}}</span>
                        <div class="progress-bar-wrapper">
                            <progress-bar
                                :percent="percent"
                                @progressTouchStart="progressTouchStart"
                                @progressTouchMove="progressTouchMove"
                                @percentChange="onProgressBarChange"
                            ></progress-bar>
                        </div>
                        <span class="time time-r">{{format(currentSong.duration)}}</span>
                    </div>
                    <div class="operators">
                        <div class="icon i-small i-gray i-left" @click="changeMode">
                            <i class="iconfont" :class="iconMode"></i>
                        </div>
                        <div class="icon i-medium i-left" :class="disableCls">
                            <i @click="prev" class="iconfont icon-prev"></i>
                        </div>
                        <div class="icon i-big i-center" :class="disableCls">
                            <i class="iconfont" :class="playIcon" @click="togglePlaying"></i>
                        </div>
                        <div class="icon i-medium i-right" :class="disableCls">
                            <i @click="next" class="iconfont icon-next"></i>
                        </div>
                        <div class="icon i-medium i-gray i-right" @click="showPlayList">
                            <i class="iconfont icon-song-list"></i>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="mini">
            <div class="mini-player" @click="open" v-show="!fullScreen" ref="miniPlayer">
                <div class="icon">
                    <div class="imgWrapper">
                        <img width="45" height="45" :class="cdCls" :src="currentSong.image">
                    </div>
                </div>
                <div class="text" ref="miniText">
                    <h2 class="scroll-text name" v-html="songName"></h2>
                </div>
                <div class="controls">
                    <div class="control">
                        <progress-circle
                            :radius="25"
                            :percent="percent"
                        >
                            <i class="icon-mini iconfont"
                               :class="miniIcon"
                               @click.stop="togglePlaying"
                            >
                            </i>
                        </progress-circle>
                    </div>
                    <div class="control" @click.stop="showPlayList">
                        <i class="iconfont icon-song-list"></i>
                    </div>
                </div>
            </div>
        </transition>
        <play-list :showFlag="isPlayListShow" @hide="hidePlayList"></play-list>
        <audio ref="audio" :src="currentSong.url"
               @play="ready" @error="error"
               @timeupdate="updataTime"
               @ended="end"
        >
        </audio>
    </div>
</template>

<script type="text/ecmascript-6">
    import { getStyle } from 'common/js/dom'
    import { REFRESH_TIME, TAB_HEIGHT, playMode } from 'common/js/config'
    import { scrollText } from 'common/js/scroll-text'
    import { setNumOnRange } from 'common/js/util'
    import { mapGetters, mapMutations, mapActions } from 'vuex'
    import animations from 'create-keyframe-animation'
    import Lyric from 'lyric-parser'
    import ProgressBar from 'base/progress-bar/progress-bar'
    import ProgressCircle from 'base/progress-circle/progress-circle'
    import Scroll from 'base/scroll/scroll'
    import PlayList from 'components/play-list/play-list'
    import PlayerMixin from 'common/mixins/player'

    // 动画时间
    const TRANSITION_TIME = 400

    // 小图片宽度
    const TARGET_WIDTH = 45
    // 小图片中心到左边框的距离
    const MINI_IMG_LEFT = 33
    // 小图片中心到下边框的距离
    const MINI_IMG_BOTTOM = 29

    // 大图片上部到上边框的距离
    const TOP_HEIGHT = 110
    // 大图片宽度
    const BIG_IMG_WIDTH = window.innerWidth * 0.8

    // 切换cd与歌词列表的滑动比例
    const CHANGE_PERCENT = 0.3
    // cd与歌词列表自动切换的过渡时间
    const MIDDLE_DURATION = 300

    export default {
        name: 'player',
        mixins: [PlayerMixin],
        data() {
            return {
                songReady: false,
                currentTime: 0,
                isProgressBtnTouch: false,
                currentLyric: null,
                currentLineNum: 0,
                currentShow: 'cd',
                playingLyric: '',
                isPlayListShow: false
            }
        },
        created() {
            // 通过touch对象来存储触摸状态变量
            this.touch = {}
            // 缓存歌词，用于判断歌词是否改变
            this.bufferLyric = {}
            // 歌词列表每行歌词的高度
            this.lyricHeightArr = []
            this.toastMsgs = ['已切换到顺序播放', '已切换到单曲循环', '已切换到随机播放']
        },
        computed: {
            songName() {
                return `${this.currentSong.name} - ${this.currentSong.singer}`
            },
            // 播放按钮icon的切换
            playIcon() {
                return this.playing ? 'icon-pause' : 'icon-play'
            },
            miniIcon() {
                return this.playing ? 'icon-pause-mini' : 'icon-play-mini'
            },
            // cd图标旋转与否的切换
            cdCls() {
                return this.playing ? 'play' : 'play pause'
            },
            // 播放控件按钮不可点击时
            disableCls() {
                return this.songReady ? '' : 'disable'
            },
            // 当前的播放进度
            percent() {
                return this.currentTime / this.currentSong.duration
            },
            ...mapGetters([
                'fullScreen',
                'playing',
                'currentIndex',
                'showTab'
            ])
        },
        methods: {
            // 最小化播放器
            back() {
                this.setFullScreen(false)
                this.initMiniPlayer(this.showTab)
            },
            // 最大化播放器
            open() {
                this.setFullScreen(true)
                this.initFullSPlayer()
            },
            // 播放器动画钩子
            enter(el, done) {
                const {x, y, scale} = this._getPostAndScale()

                // 定义动画参数
                let animation = {
                    0: {
                        transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`
                    },
                    60: {
                        transform: `translate3d(0, 0, 0) scale(1.1)`
                    },
                    100: {
                        transform: `translate3d(0, 0, 0) scale(1)`
                    }
                }

                // 注册css3动画插件
                animations.registerAnimation({
                    name: 'move',
                    animation,
                    presets: {
                        // 动画持续时间
                        duration: TRANSITION_TIME,
                        // 缓动函数
                        easing: 'linear'
                    }
                })

                // 运行动画
                animations.runAnimation(this.$refs.cdWrapper, 'move', done)
            },
            afterEnter() {
                // 注销动画
                animations.unregisterAnimation('move')
                getStyle(this.$refs.cdWrapper, 'animation', '')
            },
            leave(el, done) {
                const cdWrapper = this.$refs.cdWrapper

                getStyle(cdWrapper, 'transition', `all ${TRANSITION_TIME / 1000}s`)

                const {x, y, scale} = this._getPostAndScale()
                const tl = `translate3d(${x}px, ${y}px, 0) scale(${scale})`
                getStyle(cdWrapper, 'transform', tl, true)

                // 保证afterLeave总是会被调用
                const timer = setTimeout(done, TRANSITION_TIME)
                cdWrapper.addEventListener('transitionend', () => {
                    clearTimeout(timer)
                    done()
                })
            },
            afterLeave() {
                const cdWrapper = this.$refs.cdWrapper
                getStyle(cdWrapper, 'transition', '')
                getStyle(cdWrapper, 'transform', '', true)
            },
            // 获取小播放器图片到大播放器图片xy轴偏移
            // 以及缩放比例
            _getPostAndScale() {
                // 缩放比
                const scale = TARGET_WIDTH / BIG_IMG_WIDTH
                // 动画初始横、纵坐标
                const x = -(window.innerWidth / 2 - MINI_IMG_LEFT)
                const y = window.innerHeight - TOP_HEIGHT - (BIG_IMG_WIDTH / 2) - MINI_IMG_BOTTOM

                return {
                    x,
                    y,
                    scale
                }
            },
            // 播放页面滑动
            middleTouchStart(e) {
                // touches 当前屏幕上所有触摸点的列表
                const touch = e.touches[0]

                this.touch.initiated = true
                this.touch.startX = touch.pageX
                this.touch.startY = touch.pageY
            },
            middleTouchMove(e) {
                if (!this.touch.initiated) {
                    return
                }
                const touch = e.touches[0]
                const deltaX = touch.pageX - this.touch.startX
                const deltaY = touch.pageY - this.touch.startY
                // 歌词列表可以纵向滚动，防止两个方向的滚动相互影响
                if (Math.abs(deltaY) > 20) {
                    return
                }

                // 窗口宽度
                const windowWidth = window.innerWidth

                // 取得歌词列表相对于窗口右边框的位置
                const left = this.currentShow === 'cd' ? 0 : -windowWidth
                const offsetWidth = setNumOnRange(left + deltaX, 0, -windowWidth)

                // 取得滑动位置百分比
                this.touch.percent = Math.abs(offsetWidth / windowWidth)

                // 修改歌词列表位置
                const tl = `translate3d(${offsetWidth}px, 0, 0)`
                getStyle(this.$refs.lyricList.$el, 'transform', tl, true)
                // 设置过渡时间
                getStyle(this.$refs.lyricList.$el,
                    'transitionDuration', '0ms', true)

                // cd渐隐
                getStyle(this.$refs.middleL, 'opacity', 1 - this.touch.percent)
                // 设置过渡时间
                getStyle(this.$refs.middleL,
                    'transitionDuration', '0ms', true)
            },
            middleTouchEnd(e) {
                // 歌词列表的偏移量
                let offsetWidth = 0
                // cd的渐隐值
                let opacity = 0
                // 当前在cd处 从右往左滑时
                if (this.currentShow === 'cd') {
                    if (this.touch.percent > CHANGE_PERCENT) {
                        offsetWidth = -window.innerWidth
                        opacity = 0
                        this.currentShow = 'lyric'
                    } else {
                        offsetWidth = 0
                        opacity = 1
                    }
                } else {
                    // 当前在lyric处 从左往右滑时
                    if (this.touch.percent < (1 - CHANGE_PERCENT)) {
                        offsetWidth = 0
                        opacity = 1
                        this.currentShow = 'cd'
                    } else {
                        offsetWidth = -window.innerWidth
                        opacity = 0
                    }
                }

                // 修改歌词列表位置
                const tl = `translate3d(${offsetWidth}px, 0, 0)`
                getStyle(this.$refs.lyricList.$el, 'transform', tl, true)
                // 设置过渡时间
                getStyle(this.$refs.lyricList.$el,
                    'transitionDuration', `${MIDDLE_DURATION}ms`, true)

                // 修改cd的渐隐值
                getStyle(this.$refs.middleL, 'opacity', opacity)
                // 设置过渡时间
                getStyle(this.$refs.middleL,
                    'transitionDuration', `${MIDDLE_DURATION}ms`, true)
            },
            // 获取歌词
            getLyric() {
                this.currentSong.getLyric().then((lyric) => {
                    // 防止正在异步获取的歌词与当前播放歌词不同
                    if (this.currentSong.lyric !== lyric) {
                        return
                    }

                    this.currentLyric = new Lyric(lyric, this.handleLyric)

                    // 处理没有歌词的情况
                    if (this.currentLyric.lines.length === 0) {
                        this.playingLyric = '正在播放插播歌曲'
                    }

                    if (this.playing) {
                        this.currentLyric.play()
                    }
                }).catch(() => {
                    this.currentSong = null
                    this.playingLyric = ''
                    this.currentLineNum = 0
                })

                // 设置歌词列表padding-top值
                this._setLyricTop()
            },
            // 歌词回调
            handleLyric({lineNum, txt}) {
                this.currentLineNum = lineNum

                this._getLyricHeightArr()
                this.$refs.lyricList.scrollTo(0, -this.lyricHeightArr[lineNum], 1000)

                // 当进度条被拖动时，不在回调函数中更新cd页面显示的单行歌词
                if (!this.isProgressBtnTouch) {
                    this.playingLyric = txt
                }
            },
            // 获取每行歌词的高度
            _getLyricHeightArr() {
                if (this.isLyricChange()) {
                    return
                }

                const lyricArr = this.$refs.lyricLine
                let res = [0]
                let height = 0
                for (let i = 0, len = lyricArr.length; i < len; i++) {
                    height += lyricArr[i].offsetHeight
                    res[i + 1] = height
                }

                this.lyricHeightArr = res
            },
            // 判断歌词是否更新过
            isLyricChange() {
                if (this.bufferLyric === this.currentLyric) {
                    return false
                } else {
                    this.bufferLyric = this.currentLyric
                    return true
                }
            },
            // 根据屏幕的高度，设置歌词列表的padding-top 使得歌词初始位置为页面中部
            _setLyricTop() {
                const lyricWrapper = this.$refs.lyricWrapper
                const paddingTop = `${window.innerHeight * 0.30}px`
                getStyle(lyricWrapper, 'padding-top', paddingTop)
            },
            // 进度条触摸事件
            progressTouchStart() {
                this.isProgressBtnTouch = true
            },
            progressTouchMove(percent) {
                this.currentTime = this.currentSong.duration * percent

                // 根据当前滑动值计算出cd界面应该显示的歌词
                const lines = this.currentLyric.lines
                const currentTime = this.currentTime * 1000
                for (let i = 0, len = lines.length; i < len; i++) {
                    if (currentTime >= lines[i].time && currentTime < lines[i + 1].time) {
                        this.playingLyric = lines[i].txt
                    }
                }
            },
            // 当手动改变播放进度时,结束进度条touch时触发
            onProgressBarChange(percent) {
                this.isProgressBtnTouch = false
                const currentTime = this.currentSong.duration * percent

                this.$refs.audio.currentTime = currentTime

                // 滑动进度条后播放音乐
                if (!this.playing) {
                    this.togglePlaying()
                }

                // 修改歌词播放位置
                if (this.currentLyric) {
                    this.currentLyric.seek(currentTime * 1000)
                }
            },
            // 上一首
            prev() {
                if (!this.songReady) {
                    return
                }

                // 如果只有一首歌
                if (this.playList.length === 1) {
                    this.loop()
                } else {
                    let index = this.currentIndex - 1
                    if (index <= -1) {
                        index = this.playList.length - 1
                    }
                    this._changeSong(index)
                }
            },
            // 下一首
            next() {
                if (!this.songReady) {
                    return
                }

                // 如果只有一首歌
                if (this.playList.length === 1) {
                    this.loop()
                } else {
                    let index = this.currentIndex + 1
                    if (index >= this.playList.length) {
                        index = 0
                    }
                    this._changeSong(index)
                }
            },
            // 显示播放歌曲列表
            showPlayList() {
                this.isPlayListShow = true
            },
            hidePlayList() {
                this.isPlayListShow = false
            },
            end() {
                if (this.mode === playMode.loop) {
                    this.loop()
                } else {
                    this.next()
                }
            },
            loop() {
                this.$refs.audio.currentTime = 0
                this.setPlaying(true)
                // this.$refs.audio.play()
                if (this.currentLyric) {
                    // 偏移到歌词的初始位置
                    this.currentLyric.seek(0)
                }
            },
            // 改变播放的音乐
            _changeSong(index) {
                this.setCurrentIndex(index)
                if (!this.playing) {
                    this.togglePlaying()
                }

                this.songReady = false
            },
            // 播放与暂停
            togglePlaying() {
                if (!this.songReady) {
                    return
                }
                this.setPlaying(!this.playing)
                if (this.currentLyric) {
                    this.currentLyric.togglePlay()
                }
            },
            // audio标签是否准备就绪，供判断播放控制是否可用
            ready() {
                this.songReady = true
                this.savePlayHistory(this.currentSong)
            },
            // 防止网络错误导致按钮不可用
            error() {
                this.songReady = true
            },
            // 播放时间的更新
            updataTime(event) {
                if (this.isProgressBtnTouch) {
                    return
                }
                // 取得当前的播放时间
                this.currentTime = event.target.currentTime
            },
            // 处理播放时间格式
            format(interval) {
                // 向下取整
                interval = interval | 0

                const minute = this._pad((interval / 60) | 0)
                const second = this._pad(interval % 60)

                return `${minute}:${second}`
            },
            // 对不足位数 数字补零
            _pad(num, n = 2) {
                let len = num.toString().length
                while (len < n) {
                    num = '0' + num
                    len++
                }
                return num
            },
            resetCurrentIndex(list) {
                let index = list.findIndex((item) => {
                    return item.id === this.currentSong.id
                })
                this.setCurrentIndex(index)
            },
            initMiniPlayer(value) {
                setTimeout(() => {
                    scrollText(this.$refs.miniText, 'miniText')
                }, REFRESH_TIME)
                const el = this.$refs.miniPlayer
                if (value) {
                    getStyle(el, 'bottom', `${TAB_HEIGHT}px`)
                } else {
                    getStyle(el, 'bottom', 0)
                }
            },
            initFullSPlayer() {
                setTimeout(() => {
                    scrollText(this.$refs.titleTop, 'fcText')
                }, REFRESH_TIME)
            },
            ...mapMutations({
                setFullScreen: 'SET_FULL_SCREEN',
                setToastMsg: 'SET_TOAST_MSG'
            }),
            ...mapActions([
                'savePlayHistory'
            ])
        },
        watch: {
            currentSong(newSong, oldSong) {
                if (!newSong.id || newSong.id === oldSong.id) {
                    return
                }
                if (this.currentLyric) {
                    this.currentLyric.stop()
                }
                clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    this.$refs.audio.play()
                    this.getLyric()

                    // 横向滚动歌曲名称
                    scrollText(this.$refs.miniText, 'miniText')
                    scrollText(this.$refs.titleTop, 'fcText')
                }, REFRESH_TIME)
            },
            playing(newPlaying) {
                const audio = this.$refs.audio

                // 保证调用方法时dom存在
                setTimeout(() => {
                    newPlaying ? audio.play() : audio.pause()
                }, REFRESH_TIME)
            },
            showTab(value) {
                this.initMiniPlayer(value)
            }
        },
        components: {
            ProgressBar,
            ProgressCircle,
            Scroll,
            PlayList
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"

    .player
        .normal-player
            position: fixed
            left: 0
            right: 0
            top: 0
            bottom: 0
            z-index: 150
            background: $color-background-player
            .background
                position: absolute
                left: 0
                top: 0
                width: 100%
                height: 100%
                z-index: -1
                opacity: 0.3
                filter: blur(20px)
            .top
                position: relative
                margin-bottom: 25px
                .back
                    position absolute
                    top: 0
                    left: 10px
                    z-index: 50
                    .back-icon
                        display: block
                        padding: 12px 10px 10px 10px
                        font-size: $font-size-large
                        color: $color-text-w-ll
                .title
                    width: 70%
                    margin: 0 auto
                    line-height: 40px
                    text-align: center
                    overflow: hidden
                    white-space: nowrap
                    .text
                        display: inline-block
                        font-size: $font-size-large
                        color: $color-text-w
                .subtitle
                    line-height: 20px
                    font-size: $font-size-medium
                    color: $color-text-w
                    text-align: center
                    .text
                        position: relative
                    .text::before, .text::after
                        content: ''
                        position: absolute
                        top: 7px
                        display: inline-block
                        width: 20px
                        border-top: 1px solid $color-text-w
                    .text::before
                        left: -30px
                    .text::after
                        right: -30px
            .middle
                position: fixed
                width: 100%
                top: 110px
                bottom: 170px
                white-space: nowrap
                font-size: 0
                .middle-l
                    top: 40%
                    transform: translateY(-50%)
                    display: inline-block
                    vertical-align: top
                    position: relative
                    width: 100%
                    height: 0
                    padding-top: 80%
                    .cd-wrapper
                        position: absolute
                        left: 10%
                        top: 0
                        width: 80%
                        box-sizing: border-box
                        height: 100%
                        .cd
                            width: 100%
                            height: 100%
                            border-radius: 50%
                            .image
                                position: absolute
                                left: 0
                                top: 0
                                width: 100%
                                height: 100%
                                box-sizing: border-box
                                border-radius: 50%
                                border: 10px solid rgba(16, 18, 23, 0.3)
                        .play
                            animation: rotate 20s linear infinite
                        .pause
                            animation-play-state: paused
                    .playing-lyric-wrapper
                        box-sizing: border-box
                        width: 75%
                        margin: 37px auto 0 auto
                        padding: 4px 15px
                        text-align: center
                        border-radius: 6px
                        over-height()
                        &.high-light
                            background: $color-text-w-ld
                            .playing-lyric
                                color: $color-text-w
                        .playing-lyric
                            overflow: hidden
                            height: 20px
                            line-height: 20px
                            font-size: $font-size-medium
                            color: $color-text-w-l
                .middle-r
                    position: relative
                    display: inline-block
                    margin-top: -30px
                    vertical-align: top
                    width: 100%
                    height: 100%
                    overflow: hidden
                    .lyric-wrapper
                        padding-top: 45%
                        width: 80%
                        margin: 0 auto
                        overflow: hidden
                        text-align: center
                        .text
                            white-space: pre-wrap
                            padding-bottom: 18px
                            line-height: 18px
                            color: $color-text-w
                            font-size: $font-size-medium
                            &.current
                                color: $color-theme
                        .pure-music
                            padding-top: 50%
                            line-height: 32px
                            color: $color-text-w-l
                            font-size: $font-size-medium
            .bottom
                position: absolute
                bottom: 40px
                width: 100%
                .dot-wrapper
                    text-align: center
                    font-size: 0
                    .dot
                        display: inline-block
                        vertical-align: middle
                        margin: 0 4px
                        width: 8px
                        height: 8px
                        transition: width .3s
                        border-radius: 50%
                        background: $color-text-w-l
                        &.active
                            width: 20px
                            border-radius: 5px
                            background: $color-text-w-ll
                .progress-wrapper
                    display: flex
                    align-items: center
                    width: 90%
                    margin: 0 auto 10px auto
                    padding: 10px 0
                    .time
                        color: $color-text-w-l
                        font-size: $font-size-small
                        flex: 0 0 30px
                        line-height: 30px
                        width: 30px
                        &.time-l
                            text-align: left
                            &.big-font
                                font-size: $font-size-medium
                        &.time-r
                            text-align: right
                    .progress-bar-wrapper
                        flex: 1
                        margin: 0 10px
                .operators
                    display: flex
                    align-items: center
                    justify-content: space-between
                    .icon
                        flex: 1
                        color: $color-text-w
                        &.disable
                            color: $color-text-w-d
                    .i-left
                        text-align: right
                    .i-center
                        padding: 0 20px
                        text-align: center
                    .i-right
                        text-align: left
                    .icon-favorite
                        color: $color-sub-theme
                    .i-big
                        font-size: 50px
                    .i-medium
                        font-size: 30px
                    .i-small
                        font-size: 23px
                    .i-gray
                        color: $color-text-w-ll
            &.normal-enter-active, &.normal-leave-active
                transition: all .4s
                .top, .bottom
                    transition: all .4s cubic-bezier(0.86, 0.18, 0.82, 1.32)
            &.normal-enter, &.normal-leave-to
                opacity: 0
                .top
                    transform: translate3d(0, -100px, 0)
                .bottom
                    transform: translate3d(0, 100px, 0)
        .mini-player
            display: flex
            align-items: center
            position: fixed
            left: 0
            bottom: $height-tab
            width: 100%
            height: 45px
            margin-bottom: -1px
            z-index: 140
            background: $color-background-head
            box-shadow: 0px -4px 10px -5px #ddd
            transition: all $player-up-time
            &.mini-enter-active, &.mini-leave-active
                transition: all .4s
            &.mini-enter, &.mini-leave-to
                opacity: 0
            .icon
                position: relative
                top: -7px
                flex: 0 0 45px
                width: 45px
                height: 45px
                padding: 0 10px 0 10px
                .imgWrapper
                    height: 100%
                    width: 100%
                    img
                        border-radius: 50%
                        &.play
                            animation: rotate 10s linear infinite
                        &.pause
                            animation-play-state: paused
            .text
                justify-content: center
                flex: 1
                line-height: 22px
                white-space: nowrap
                overflow: hidden
                .name
                    display: inline-block
                    font-size: $font-size-medium
                    color: $color-text
            .controls
                padding: 0 10px
                display: flex
                align-items: center
                .control
                    flex: 0 0 30px
                    width: 30px
                    padding-right: 5px
                    .icon-play-mini, .icon-pause-mini, .icon-song-list
                        color: $color-theme
                    .icon-song-list
                        font-size: 30px
                    .icon-play-mini, .icon-pause-mini
                        font-size: 26px
                    .progress-circle
                        height: 26px
                    .icon-mini
                        position: absolute
                        left: 0
                        top: 0
    @keyframes rotate
        0%
            transform: rotate(0)
        100%
            transform: rotate(360deg)
</style>
